<template>
  <div class="container">
    <div
      style="
        width: 100%;
        height: 5%;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 30px;
      "
    >
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    </div>
    <div style="margin-left: 20px">
      <el-input
        v-model="Sydw"
        class="form-input"
        style="width: 300px"
        disabled
      ></el-input>
      <el-input
        v-model="Equ"
        class="form-input"
        style="width: 250px"
        disabled
      ></el-input>
      <el-input
        v-model="yearValueA"
        class="form-input"
        style="width: 150px"
        disabled
      ></el-input>
      <span style="margin-left: 10px; margin-right: 10px">至</span>
      <el-input
        v-model="yearValueB"
        class="form-input"
        style="width: 150px"
        disabled
      ></el-input>
    </div>
    <div class="row">
      <span>总报警次数：</span>
      <span class="red underline">31</span>
      <span class="unit">次</span>
    </div>
    <div style="width: 100%; margin-top: 40px">
      <pie></pie>
    </div>
  </div>
</template>
<script>
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import Pie from "./pie.vue";
export default {
  components: { Breadcrumb, Pie },
  data() {
    return {
      naviItems: [
        { text: "起重机械" },
        { text: "数据引擎" },
        { text: "监控数据" },
      ],
      EquValue: "一钢轧 008",
      SydwValue: "马鞍山钢铁股份有限公司",
      yearValueA: "       2020年",
      yearValueB: "       2021年",
    };
  },
  computed: {
    Equ() {
      return "设备编号：" + this.EquValue;
    },
    Sydw() {
      return "使用单位：" + this.SydwValue;
    },
  },
  created() {},

  methods: {},
};
</script>
<style lang="less" scoped>
div.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  div.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 26px;
    font-weight: 550;
    margin-top: 22px;
    color: black;
    span {
      margin-left: 2px;
      margin-right: 2px;
    }
    span.red {
      color: red;
    }
    span.underline {
      text-decoration: underline;
    }
    span.unit {
      margin-right: 15px;
    }
  }
}
.form-input /deep/ .el-input__inner {
  color: rgb(0, 0, 0) !important;
}
</style>
